<template>
    <div class="china-price">
        <div class="china-box" v-for="item in productlist">
            <h4>{{item.productInfo1}}</h4>
            <div class="china-info">
                <span>{{item.productFrom}}</span>
                <span>{{item.productTime}}</span>
                <span>{{item.productTips}}</span>
            </div> 
            <div class="text-des">
                <div class="china-text">
                    <p>{{item.productInfo}}</p>
                </div>
                <div class="china-img">
                    <img :src="item.productImg2.src" :alt="item.productImg2.alt">
                </div>
            </div>
            <P class="moble-text">{{item.productName}}</P>
            <p>
                <img :src="item.productImg2.src" :alt="item.productImg2.alt">
            </p>
            <div class="product-addr">
                <ul class="product-addr-list">
                    <li class="addr-list-aitem" v-for="item in newArr">
                        <span class="span1">{{item}}</span>
                        <span class="span2">有货</span>
                    </li>
                </ul>
            </div>
            <div class="golink">
                 <a href="javascript:;" target="_blank">前往购买</a>
            </div>
            <div class="weichat-pic">
                <img src="../../../static/images/mmbweixin2.png" alt="">
            </div>
            <div class="commemt-area">
                <h3>发表评论</h3>
                <textarea class="textarea"></textarea>
                <button>发表评论</button>
            </div>

            <div class="comment-histry">
                <h3>最新评论</h3>
                <ul class="comment-list">
                    <li class="comment-item">
                        <p class="persion-logo">
                            <img src="http://home.manmanbuy.com/upface/face/1466230634_162.jpg" alt="">
                        </p>
                        <div class="persion-conment">
                            <span class="title">赶鸭子上架</span>
                            <span class="time">{{item.productTime}}</span>
                            <p class="comment">比超市便宜</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
    export default {
        name:'moneyproduct',
        data(){
            return {
                productlist:[],
                addrlist:[],
                newArr:[],
                productid:this.$route.params.productid,
            }
        },
        created(){
            this.getchinaproductList()
        },
        methods:{
            getchinaproductList(){//获取国内商品折扣信息
                axios({
                    url:'http://localhost:3000/api/getmoneyctrlproduct',
                    method:"get",
                    params:{
                        productid:this.productid,
                    }
                }).then(res=>{
                    console.log(res)
                    this.addrlist=res.data.result.productCity;
                    for(var i=0;i<this.addrlist.length;i++){
                        this.newArr[i]=this.addrlist[i].split("有货")[0];
                    }
                    this.productlist=[res.data.result];
                })
            }
        }
    }
</script>
<style scoped>
.china-price{
    width: 100%;
}
.china-box {
  width: 100%;
}
.china-box h4 {
    width: 100%;
  font-size: 18px;
  margin: 10px auto 5px;
  font-weight: 800;
  text-align: left;
  text-align-last: left;
  word-break: break-all;
  color: #5a5a5a;
  line-height: normal;
}
.china-box .china-info {
  margin: 12px auto;
  color: #999;
  font-size: 14px;
}
.china-box .text-des {
  width: 100%;
  display: flex;
}
.china-box .text-des .china-text {
  flex: 3;
  text-indent: 0.56rem;
  font-size: 16px;
  padding-bottom: 20px;
  line-height: 24px;
  color: #606060;
  word-break: break-all;
}
.china-box .text-des .china-img {
  flex: 1;
}
.china-box .moble-text {
  margin: 6px auto;
  line-height: 24px;
  color: #070707;
  font-size: 16px;
  word-break: break-all;
}
.china-box .product-addr {
  width: 80%;
  margin: 20px auto;
  box-shadow: 0 0 10px lime;
  z-index: 30;
}
.china-box .product-addr .product-addr-list {
  width: 100%;
}
.china-box .product-addr .product-addr-list .addr-list-aitem {
  display: flex;
  justify-content: space-around;
}
.china-box .product-addr .product-addr-list .addr-list-aitem span {
  text-align: center;
  flex: 1;
  border-bottom: 1px dotted silver;
  padding: 0 10px;
}
.china-box .product-addr .product-addr-list .addr-list-aitem .span1 {
  font-size: 16px;
  color: #000;
  font-weight: bold;
}
.china-box .product-addr .product-addr-list .addr-list-aitem .span2 {
  font-size: 16px;
  color: #10eedb;
  font-weight: bold;
}
.china-box .golink {
  display: block;
  margin: 20px 10px;
  background: #FF9000;
  height: 30px;
  border-radius: 4px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
}
.china-box .golink a {
  color: #141313;
}
.china-box .weichat-pic {
  margin: 20px;
  text-align: center;
}
.china-box .commemt-area {
  position: relative;
  width: 100%;
}
.china-box .commemt-area h3 {
  font-size: 16px;
  padding: 6px 8px;
}
.china-box .commemt-area .textarea {
  width: 100%;
  height: 100px;
  border: 1px solid gold;
}
.china-box .commemt-area button {
  position: absolute;
  right: 2px;
  bottom: 4px;
  background: #ff841d;
  border: none;
  border: 2px solid #ff841d;
  border-left: none;
  border-top: none;
  padding: 0;
  width: 100px;
  height: 39px;
  color: #fff;
  outline: 0;
  border-radius: 0 0 2px;
  font-size: 16px;
}
.china-box .comment-histry {
  width: 100%;
}
.china-box .comment-histry h3 {
  font-size: 16px;
  padding: 6px 8px;
  color: #000;
}
.china-box .comment-histry .comment-list {
  width: 100%;
}
.china-box .comment-histry .comment-list .comment-item {
  display: flex;
}
.china-box .comment-histry .comment-list .comment-item .persion-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid red;
}
.china-box .comment-histry .comment-list .comment-item .persion-logo img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: top;
}
.china-box .comment-histry .comment-list .comment-item .persion-conment {
  margin-left: 10px;
  flex: 1;
}
.china-box .comment-histry .comment-list .comment-item .persion-conment .title {
  font-size: 16px;
  color: #15db1f;
}
.china-box .comment-histry .comment-list .comment-item .persion-conment .time {
  float: right;
  margin-right: 10px;
}
.china-box .comment-histry .comment-list .comment-item .persion-conment .comment {
  font-size: 20px;
  color: gray;
}
</style>